<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script defer>
        // Check if the current URL scheme is HTTPS
        if (window.location.protocol === "https:") {
            // Create a new meta element
            var metaTag = document.createElement("meta");

            // Set attributes for the meta element
            metaTag.setAttribute("http-equiv", "Content-Security-Policy");
            metaTag.setAttribute("content", "upgrade-insecure-requests");

            // Add the meta element to the document head
            document.head.appendChild(metaTag);
        }
    </script>
    <title>{% block title %}{% endblock %}</title>
    <meta name="apple-mobile-web-app-title" content="Wunjo AI">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta property="og:image" content="{{ url_for('static', filename='basic/icon/square/green/logo.png') }}">
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='basic/icon/square/green/logo.png') }}">
    <link rel="shortcut icon" type="image/x-icon" href="{{ url_for('static', filename='basic/icon/square/green/logo.ico') }}" id="icon">
    <link rel="apple-touch-icon" type="image/png" href="{{ url_for('static', filename='basic/icon/square/green/logo.png') }}">
    <link rel="mask-icon" type="image/svg+xml" href="{{ url_for('static', filename='basic/icon/square/green/logo.svg') }}" color="#111">
    <link rel="stylesheet" href="{{ url_for('static', filename='basic/css/tourjs.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='basic/css/awesomplete.min.css') }}">

    <!--Change green icon on white for mobile device-->
    <script>
        // Function to change the favicon
        if ((typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1)) {
            // This specifies the icon file that represents
            document.querySelector('link[rel="icon"]').href = "{{ url_for('static', filename='basic/icon/square/white/logo.png') }}";
            // This is an older method of specifying the favicon
            document.querySelector('link[rel="shortcut icon"]').href = "{{ url_for('static', filename='basic/icon/square/white/logo.ico') }}";
            // his specifies the icon that will be used when a user saves the webpage to their home screen on an iOS device (like an iPhone or iPad)
            // document.querySelector('link[rel="apple-touch-icon"]').href = "{{ url_for('static', filename='basic/icon/square/white/logo.png') }}";
            // This specifies the icon to be used as a mask for creating a pinned tab icon in browsers that support it
            // document.querySelector('link[rel="mask-icon"]').href = "{{ url_for('static', filename='basic/icon/square/white/logo.svg') }}";
        }
    </script>
    <script src="{{ url_for('static', filename='components/js/element.min.js') }}" defer></script>
    <script src="{{ url_for('static', filename='basic/js/zooming.min.js') }}"></script>
    <script src="{{ url_for('static', filename='basic/js/js-yaml.min.js') }}"></script>

    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='fontawesome/css/all.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='basic/css/base.css') }}">
    {% block head %}{% endblock %}
</head>

<script async>
    // Get general translation
    let translationsBabel = {};
    async function loadTranslationsBabel() {
        const cacheKey = `translations`;
        const cached = localStorage.getItem(cacheKey);

        if (cached) {
            translationsBabel = JSON.parse(cached);
            console.log("Loaded translations from cache");
        } else {
            const response = await fetch(`/translations.json`);
            translationsBabel = await response.json();
            localStorage.setItem(cacheKey, JSON.stringify(translationsBabel));
            console.log("Fetched translations from server");
        }
    }
    function getTranslationBabel(text) {
        return translationsBabel[text] || text;
    };
    document.addEventListener("DOMContentLoaded", loadTranslationsBabel);
</script>
{% block body %}{% endblock %}
</html>